<template>
  <div class="content">
    <h2>
      当前求和为:{{ sum }} 地址：{{ address }},放大十倍之后是:
      {{ bigSum }} 地址是：{{ upperSchool }}
    </h2>

    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

    <button @click="add" style="margin: 0 10px">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
import { ref } from "vue";
import { useCountStore } from "../store/count";

import { storeToRefs } from "pinia";

// let sum = ref(1);
let n = ref(1);

/**
 * 注意点,这里打印countStore是被Reactive包裹着的。但是里面的sum数据是ref包裹的，当你要访问一个ref的数据的时候通常是value，但是这里不需要，因为它在reactive里面，已经帮你拆解了，所以你直接countStore.sum就可以了
 */
let countStore = useCountStore();

// bigSum和upperSchool不需要你调用，你当计算属性用就好了，内部已经帮你调用了。值就是你定义函数的返回值，直接读取
const { sum, address, bigSum, upperSchool } = storeToRefs(countStore);

function add() {
  // sum.value += n.value;

  // pinia第一种修改方式
  // countStore.sum += 1;

  // pinia第二种修改方式 $patch批量变更,当你要改的数据很多的时候，推荐使用这种写法
  /*countStore.$patch({
    sum: 666,
    address: "广州北站",
  });*/

  // pinia第三种修改方式 actions
  countStore.increment(n.value);
}

function minus() {
  // sum.value -= n.value;
  countStore.subtraction(n.value);
}
</script>

<style scoped>
.content {
  margin-bottom: 20px;
  height: 100px;
  border-radius: 20px;
  background-color: skyblue;
  padding-left: 30px;
}
select,
button {
  height: 25px;
}
</style>
